import React from 'react'
import './my.css'
import { Image, Button } from 'react-vant'
import { Space } from 'react-vant'
import { ArrowLeft, BullhornO } from '@react-vant/icons'
import { NavLink, useNavigate } from 'react-router-dom'
// 菜单
import menu1 from '../../assets/images/menu1.png'
import menu2 from '../../assets/images/menu2.png'
import menu3 from '../../assets/images/menu3.png'
import menu4 from '../../assets/images/menu4.png'
import menu5 from '../../assets/images/menu5.png'
import menu6 from '../../assets/images/menu6.png'
import menu7 from '../../assets/images/menu7.png'
import menu8 from '../../assets/images/menu8.png'
import menu9 from '../../assets/images/menu9.png'
// 头像
import tx from '../../image/pichead.jpg'
// 我的问诊
import dq from '../../assets/images/当前问诊.png'
import ls from '../../assets/images/历史问诊.png'

export default function My() {
  const userInfo =
    JSON.parse(localStorage.getItem("userInfo") as string) || null;
  const navigate = useNavigate();
  return (
    <div className='box'>
      {/* 头部 */}
      <div className="header">
        <Space className='header-icon'>
          <ArrowLeft color='#fff' fontSize={25} onClick={() => navigate('/deafult/home')} />
          <BullhornO color='#fff' fontSize={25} onClick={() => navigate('/')} />
        </Space>
        <div className="header-img">
          <div className="header-span">
            <img width='50' height='50' src={tx} className='tx'/>
            <span>user</span>
          </div>
          <Button type='danger'>签到</Button>
        </div>
      </div>
      {/* 我的问诊 */}
      <div className='interrogation'>
        <h2>我的问诊</h2>
        <NavLink to='/current'>
          <Image width='100%' height='60' src={dq} />
        </NavLink>
        <NavLink to='/history'>
          <Image width='100%' height='60' src={ls} /> 
        </NavLink>
      </div>
      {/* 菜单 */}
      <ul className="menu">
        <li>
          <NavLink to='/archives'>
            <Image width='100' height='100' src={menu1} />
          </NavLink>
          <NavLink to='/purse'>
            <Image width='100' height='100' src={menu2} />
          </NavLink>
          <NavLink to='/collect'>
            <Image width='100' height='100' src={menu3} />
          </NavLink>
        </li>
        <li>
          <NavLink to='/suggestion'>
            <Image width='100' height='100' src={menu4} />
          </NavLink>
          <NavLink to='/video'>
            <Image width='100' height='100' src={menu5} />
          </NavLink>
          <NavLink to='/community'>
            <Image width='100' height='100' src={menu6} />
          </NavLink>
        </li>
        <li>
          <NavLink to='/follow'>
            <Image width='100' height='100' src={menu7} />
          </NavLink>
          <NavLink to='/settings'>
            <Image width='100' height='100' src={menu8} />
          </NavLink>
          <NavLink to='/quest'>
            <Image width='100' height='100' src={menu9} />
          </NavLink>
        </li>
      </ul>
    </div>
  )
}
